<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/homepage.css" />
	<link rel="stylesheet" type="text/css" href="../css/normal.css"/>
    <link rel="stylesheet" type="text/css" href="../css/son-one.css"/>
    <link rel="stylesheet" href="../css/son-two.css">
</head>
<body>
    <header>
        <div id="logo">
            <img src="">
        </div>
        <div id="container">
            <ul>
                <li><a href="">在线商城</a></li>
                <li><a href="">坚果R2</a></li>
                <li><a href="">Smartisan TNT go</a></li>
                <li><a href="">坚果 TNT工作站</a></li>
                <li><a href="">Smartisan OS</a></li>
                <li><a href="">欢喜云</a></li>
                <li><a href="">论坛</a></li>
                <li><a href="">开发者支持</a></li>
                <li><a href="">荣誉与奖项</a></li>
            </ul>
        </div>
        <div id="aside">
            <div id="position-head">
                <a href=""></a>
            </div>
            <div id="position-aside">
                <a href=""></a>
            </div>
        </div>
    </header>
    <main>
        <div id="main-title">
            <ul id="index-fir">
                <li><a href="http://localhost/project/hammer/homepage.html">首页</a></li>
                <li><a href="son-one.html">坚果手机</a></li>
                <li><a href="">TNT</a></li>
                <li><a href="son-two.html">官方自营</a></li>
                <li><a href="">服务</a></li>
            </ul>
            <div id="search">
                <div id="form">
                    <button type="button" id="submit-btn"></button>
                    <input type="" name="" id="search-text" value="" placeholder=""/>
                </div>
                <div id="recommends">
                    <a href="https://www.smartisan.com/item/100162801" class="recommend">坚果 R2</a>
                    <a href="https://www.smartisan.com/item/100187101" class="recommend" >TNT</a>
                </div>
            </div>
            <div id="main-stiky">
                <div id="stiky-head">
                    <a href=""></a>
                </div>
                <div id="stiky-aside">
                    <a href=""></a>
                </div>
            </div>
        </div>
        <div id="nav-select">
            <div id="nav-center">
                <div id="nav-left">
                    <div id="phones">手机</div>
                    <ul id="nav-phone">
                        <li>
                            <a href=""><img
                                    src="https://resource.smartisan.com/resource/a4c73e549097c7f5cf2c5e0d87e56d13.png?x-oss-process=image/resize,w_50/format,webp"
                                    id="picture">
    
                                <span id="phone-span-1">
                                    手机
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div id="nav-right">
                    <div id="official">官方配件</div>
                    <ul id="nav-u">
                        <li><a href=""><img src="../img/4.webp" id="picture" id="picture">蓝牙耳机</a></li>
                        <li><a href=""><img src="../img/4数据线.webp" id="picture">数据线</a></li>
                        <li><a href=""><img src="../img/4.充电器.webp" id="picture">充电器</a></li>
                        <li><a href=""><img src="../img/4移动电源.webp" id="picture">移动电源</a></li>
    
                    </ul>
                    <div id="nav-rig">
                        <ul>
                            <li><a href=""><img src="../img/4.拍照配件.webp" id="picture">拍照配件</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="nav-select-two"></div>
        <div id="nav-select-three">
            <div id="nav-three-center">
                <ul id="nav-three-ul">
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.保修.png" id="picture">
                    <div id="nav-flex-two">保修服务</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.在线客服.png" id="picture">
                    <div id="nav-flex-two">在线客服</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.服务政策.png" id="picture">
                    <div id="nav-flex-two">服务政策</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.发起售后.png" id="picture">
                    <div id="nav-flex-two">发起售后</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.维修门店.png" id="picture">
                    <div id="nav-flex-two">维修门店</div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div id="nav-flex-one">
                    <img src="../img/5.自助服务.png" id="picture">
                    <div id="nav-flex-two">自助服务</div>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="nav-select-four">
            <ul>
                <li id="nut"><a href="" id="nut-a">坚果R2</a></li>
                <li id="nut"><a href="" id="nut-b">蓝牙耳机</a></li>
                <li id="nut"><a href="" id="nut-c">TNT</a></li>
                <li id="nut"><a href="" id="nut-d">移动电源</a></li>
                <li id="nut"><a href="" id="nut-e">坚果快充</a></li>
                <li id="nut"><a href="" id="nut-f">坚果R2保护套</a></li>
            </ul>
            <div id="delta"></div>
        </div>
        <div id="nav-select-five">
            <div id="nav-pic-1">
            <p id="shop-big">
                购物车为空
            </p>
            <p id="shop-small">
                您还没有选购任何商品，现在区商城选购吧!
            </p>
            </div>
        </div>
    </main>
    <div id="son-one-top">
        <ul id="container-clearfix">
            <li id="item-clearfix">
                <a id="link-active">综合排序</a>
                <span ::after></span>
            </li>
            <li id="item-clearfix">
                <a id="link-active-two">销量排序</a>
                <span ::after></span>
            </li>
            <li id="item-clearfix">
                <a id="link-active-three">价格低到高</a>
                <span ::after></span>
            </li>
            <li id="item-clearfix">
                <a id="link-active-four">价格高到低</a>
                <span ::after></span>
            </li>
        </ul>
    </div>
    <div id="son-two">
        <div id="son-two-big">
            <!-- <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/9-6.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan 真无线蓝牙耳机 Pro</h3>
                        <h5>通话降噪 全新升级</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥129.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/8-6.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan 手机立式扩展坞</h3>
                        <h5>连屏幕，连外设，手机拓展一步到位</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥299.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/8-3.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan TNT go</h3>
                        <h5>欢迎使用下一代电脑</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥1,199.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-2.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan TNT 大满足套装</h3>
                        <h5>下一代手机，下一代电脑</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥3,999.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-3.webp" alt="">
                </figure>
                    <article>
                        <h3 id="id-three">Smartisan 真无线蓝牙耳机（抖音文创限量款）</h3>
                        <h5>六月配件直降</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥299.00</span>
                    </article>
                
            </section> -->
        </div>
        <div id="son-two-big">
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/9-5.webp" alt="">
                </figure>
                    <article>
                        <h3 id="id-three">Smartisan 多功能数据线（USB 3.2 Gen 2）</h3>
                        <h5>高清投屏，高速传输</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥39.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/9-2.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan 手机支架</h3>
                        <h5>立得住，放的稳</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥39.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/8-5.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan 智能手写笔</h3>
                        <h5>六月配件直降</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥499.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-7.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 足迹系列保护套</h3>
                        <h5>7种主题随机发货</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥59.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/10-5.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 足迹系列保护套 联合国通过《儿童权利宣言》</h3>
                        <h5>为了那些改变人类足迹的进程</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥29.00</span>
                    </article>
                
            </section>
        </div>
        <div id="son-two-big">
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-9.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 足迹系列保护套 圆珠笔的改进者出生</h3>
                        <h5>为了那些改变人类足迹的进程</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥59.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-8.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 足迹系列保护套 3M 开始销售透明胶带</h3>
                        <h5>为了那些改变人类足迹的进程</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥29.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/10-2.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 足迹系列保护套 正电子的发现者出生</h3>
                        <h5>为了那些改变人类足迹的进程</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥59.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-1.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2 透明保护套</h3>
                        <h5>TPU透明软胶材质，耐磨耐用</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥29.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-5.webp" alt="">
                </figure>
                    <article>
                        <h3>坚果 R2</h3>
                        <h5>是下一代手机，更是下一代电脑</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥2,699.00</span>
                    </article>
                
            </section>
        </div>
        <div id="son-two-big">
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/6-4.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan 真无线TWS蓝牙耳机</h3>
                        <h5>智能配对 开盖即连</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥99.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/10-4.webp" alt="">
                </figure>
                    <article>
                        <h3 id="id-three">足迹保护套 莱卡成为第一只进入地球轨道的动物 for iPhone 11</h3>
                        <h5>公益宝贝</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥29.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/10-3.webp" alt="">
                </figure>
                    <article>
                        <h3 id="id-three">足迹保护套 克里斯蒂安·多普勒出生 for iPhone 11</h3>
                        <h5>六月配件直降</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥69.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/10-6.webp" alt="">
                </figure>
                    <article>
                        <h3 id="id-three">足迹保护套 人类首次公开使用乙醚 for iPhone 11</h3>
                        <h5>公益宝贝</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥29.00</span>
                    </article>
                
            </section>
            <section id="son-two-box">
                <figure id="item-cover">
                    <img src="../img/9-4.webp" alt="">
                </figure>
                    <article>
                        <h3>Smartisan  颈挂蓝牙耳机</h3>
                        <h5>“圈铁一体代表作”</h5>
                    </article>
                    <aside id="item-attr-color">
                        <figure id="outer-active">
                            <img src="../img/12-1.webp" alt="">
                        </figure>
                        <figure id="outer">
                            <img src="../img/12-2.webp" alt="">
                        </figure>
                    </aside>
                    <article id="item-price">
                        <span>￥199.00</span>
                    </article>
                
            </section>
        </div>
        <div id="son-two-big">
                <section id="son-two-last">
                    <figure id="item-cover">
                        <img src="../img/9-3.webp" alt="">
                    </figure>
                        <article>
                            <h3>坚果彩虹数据线</h3>
                            <h5>七彩配色随机发货，为生活增添一份小小惊喜</h5>
                        </article>
                        <aside id="item-attr-color"></aside>
                        <article id="item-price">
                            <span>￥9.99</span>
                        </article>
                    
                </section>
            </div>
    </div>
    <footer>
        <div id="foot-center">
            <div id="footer-menu">
                <ul>
                    <li>
                        <h3>订单服务</h3>
                        <div id="item-name">
                            <a href="">购买指南</a>
                            <a href="">送货政策</a>
                        </div>
                    </li>
                    <li>
                        <h3>服务支持</h3>
                        <div id="item-name">
                            <a href="">自助服务</a>
                            <a href="">维修门店</a>
                        </div>
                    </li>
                    <li>
                        <h3>媒体中心</h3>
                        <div id="item-name">
                            <a href="">新闻动态</a>
                            <a href="">官方视频</a>
                            <a href="">图片资源</a>
                        </div>
                    </li>
                    <li>
                        <h3>关注我们</h3>
                        <div id="item-name">
                            <a href="">新浪微博</a>
                            <a href="">官方微信</a>
                            <a href="">荣誉奖项</a>
                        </div>
                    </li>
                </ul>
            <div id="footer-service">
                <h1 id="tel">400 - 603 - 5000</h1>
                <h2 id="time">周一到周日 9:00 - 18:00</h2>
                <h2 id="desc">(仅收市话费)</h2>
                <div id="online">
                    <a href="//www.smartisan.com/support/#/self-service" id="online-btn">
                        <span>在线帮助</span>
                    </a>
                </div>
            </div>
            </div>
            <div id="footer-info">
                <ul>
                    <li id="footer-first-li">Copyright © 2020 smartisan.com 版权所有</li>
                    <li><a href="">锤子商城隐私政策</a></li>
                    <li><a href="">锤子商城用户协议</a></li>
                    <li><a href="">资质证照</a></li>
                </ul>
                <ul>
                    <li><a href="">京 ICP 备 19048576 号 - 1</a></li>
                    <li><a href=""><img src="//static.smartisanos.cn/indexnew/img/icon-public-security.d0289dc0.png"></a></li>
                    <li><a href="">京公网安备 11010802033469号</a></li>
                    <li><a href="">京食药网食备 202010031</a></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/homepage-select.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/son-one.js"></script>
<script src="../js/homepage-php.js"></script>
<script>
	$(function(){
		getData();
	})
	function getData(){
		$.get('http://localhost/project/goodsAndShoppingCart/getGoodsList.php',{"typeId":"002"},function(data){
			console.log(JSON.parse(data));
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach((item,index)=>{
				str +=`<section id="son-two-box">
                <figure id="item-cover">
                    <img src="${item.goodsImg}" alt="">
                </figure>
                    <article>
                        <h3 id = three>${item.goodsName}</h3>
                        <h5>${item.goodsDesc}</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥${item.goodsPrice}</span>
                    </article>
                
            </section>`
			})
			$('#son-two-big').html(str);
		})
	}
	$('#son-two-big').on('click','section',function(e){
		if(e.target.nodeName == 'SECTION'){
			console.log(e.target.getAttribute('goodsid'));
			let id = e.target.getAttribute('goodsid');
			location.href = './details.html?goodsId='+ id;
		}
	})
	$('#son-two-big').on('click','img',function(e){
		if(e.target.nodeName == 'IMG'){
			console.log(e.target.getAttribute('imgsid'));
			let id = e.target.getAttribute('imgsid');
			location.href = './details.html?imgsid='+ id;
		}
	})
    $(function(){
		getDeta();
	})
	function getDeta(){
		$.get('http://localhost/project/goodsAndShoppingCart/getGoodsList.php',{"typeId":"002"},function(data){
			console.log(JSON.parse(data));
			let arr = JSON.parse(data);
			let str = '';
			arr.forEach((item,index)=>{
				str +=`<section id="son-two-box">
                <figure id="item-cover">
                    <img src="${item.goodsImg}" alt="">
                </figure>
                    <article>
                        <h3 id = three>${item.goodsName}</h3>
                        <h5>${item.goodsDesc}</h5>
                    </article>
                    <aside id="item-attr-color"></aside>
                    <article id="item-price">
                        <span>￥${item.goodsPrice}</span>
                    </article>
                
            </section>`
			})
			$('#son-two-big').html(str);
		})
	}
	$('#son-two-big').on('click','section',function(e){
		if(e.target.nodeName == 'SECTION'){
			console.log(e.target.getAttribute('goodsid'));
			let id = e.target.getAttribute('goodsid');
			location.href = './details.html?goodsId='+ id;
		}
	})
	$('#son-two-big').on('click','img',function(e){
		if(e.target.nodeName == 'IMG'){
			console.log(e.target.getAttribute('imgsid'));
			let id = e.target.getAttribute('imgsid');
			location.href = './details.html?imgsid='+ id;
		}
	})
</script>